<template>
  <div class="hello">
    <header>
    <router-link to='zhibo'>
        <span><img src="../assets/img/fanhui.png"></span>
    </router-link>
     
     <span><input type="text" placeholder="搜索博客，节目"></span>
     <span>搜索</span>
    </header>
    <div class="souyisuo">
      <span>大家都在搜</span>
      <span></span>
      <span>换一批</span>
    </div>
    <main>
      <ul>
        <li><span class="one">1</span> 大气电台</li>
        <li><span class="two">2</span> TFboys</li>
        <li><span class="san">3</span> 小说</li>
        <li><span>4</span> 彩色斑马讲故事</li>
        <li><span>5</span> 凯叔讲故事</li>
        <li><span>6</span> 三生三世十里桃花香</li>
        <li><span>7</span> 笑不出来</li>
        <li><span>8</span> 笑不出来</li>
        <li><span>9</span> 园丁妈妈的睡前故事</li>
        <li><span>10</span> 王俊凯</li>
      </ul>
    </main>

  </div>
</template>

<script>
export default {
  name: 'hello',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang = 'less'>
@import '.././assets/less/style.less';

header{
  .px2rem(height, 100);
  .border-bottom(1,solid, #ccc);
  .webkit();
  align-items: center;
    a{
        span:nth-child(1){
        img{
          .px2rem(height, 45);
          .px2rem(width, 45);
          .margin-left(10);
        }
      } 
    }
   
  span:nth-child(2){
    input{
      border:none;
      .padding-left(30); 
      background: #fefcf0;
    }
    
  };
  span:nth-child(3){
    .margin-left(250);
  };
}
.souyisuo{
  .margin-top(60);
  .margin-bottom(34);
  .webkit();
  justify-content: space-between;
  span:nth-child(1){
    .margin-left(20);
    .font(24,#c7c4bb);
  };
  span:nth-child(3){
    .margin-right(20);
    .font(18,#a2a29a);
  };
}
main{
  ul{
    .font(24,#63625d);
    .webkit();
    align-items: center;
    flex-wrap: wrap;
    li{
      .line-height(84);
      .px2rem(width, 365);
      .px2rem(height, 84);
      .border-bottom(1, solid, #ccc);
      span{
        .margin-left(60);
      }
      .one,.two,.san{
        .padding(0,10,0,10);
        background: #fd5353;
        .margin-top(30);
        .font(24,#fff);
      }
      .two{
        background: #ffc33e;
      }
      .san{
        background: #f3e348;
      }
    }
  }
}


</style>
